<template>
    <div>
        <div class="search_box">
            <p class="search_head">车场设备</p>
            <el-table
                    :data="parkchannel_list"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="arm_code"
                        label="设备编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="entrance_name"
                        label="入口名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="exit_name"
                        label="出口名称">
                </el-table-column>
                <el-table-column
                        prop="arm_version"
                        label="设备版本">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="设备角色">
                </el-table-column>
                <el-table-column
                        prop="channel_gps"
                        label="GPS位置">
                </el-table-column>
                <el-table-column
                        prop="channel_address"
                        label="地址">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button type="primary" size="small" @click="openDialog(scope.row.id)">修改</el-button>
                        <el-button type="error" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalList">
            </el-pagination>
            <el-row>
                <el-col :span="4" :offset="20"><el-button type="info" @click="openDialog()">新建</el-button></el-col>
            </el-row>
        </div>



        <el-dialog title="设备管理" v-model="dialogFormVisible">
            <el-form :model="form" ref="form" label-width="80px" :rules="rules">
                <el-row>
                    <el-col :span="8" :offset="2">
                        <el-form-item label="设备编号" prop="arm_code" :error="errors.arm_code">
                            <el-input v-model="form.arm_code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="2">
                        <el-form-item label="入口名称" prop="entrance_name" :error="errors.entrance_name">
                            <el-input v-model="form.entrance_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" :offset="2">
                        <el-form-item label="出口名称" prop="exit_name" :error="errors.exit_name">
                            <el-input v-model="form.exit_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="2">
                        <el-form-item label="GPS位置" prop="lng" :error="errors.lng" style="float: left;width:50%;">
                            <el-input v-model="form.lng"></el-input>
                        </el-form-item>
                        <el-form-item prop="lat" :error="errors.lat" style="float: left;width:53%;margin-left:-62px;">
                            <el-input v-model="form.lat"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" :offset="2">
                        <el-form-item label="设备版本" prop="arm_version" :error="errors.arm_version">
                            <el-input v-model="form.arm_version"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="2">
                        <el-form-item label="设备角色" prop="type" :error="errors.type">
                            <el-select v-model="form.type" placeholder="请选择角色">
                                <el-option v-for="item in types"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="地址" prop="channel_address" :error="errors.channel_address">
                        <el-input v-model="form.channel_address"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="makeSubmit('form')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data(){
            return {
                parkchannel_list: [],
                totalList: 0,
                pageSize: 0,
                currentPage: 1,
                types: [
                    {
                        label: '业务',
                        value: '1',
                    },
                    {
                        label: '数据',
                        value: '2',
                    },
                    {
                        label: '业务和数据',
                        value: '3',
                    }
                ],
                form: {
                    id: '',
                    arm_code: '',
                    entrance_name: '',
                    exit_name: '',
                    lng: '',
                    lat: '',
                    arm_version: '',
                    type: '',
                    channel_address: ''
                },
                errors: {
                    arm_code: '',
                    entrance_name: '',
                    exit_name: '',
                    lng: '',
                    lat: '',
                    arm_version: '',
                    type: '',
                    channel_address: ''
                },
                rules: {
                    arm_code: [
                        {required: true, message: '请填写设备编号', trigger: 'blur'}
                    ],
                    entrance_name: [
                        {required: true, message: '请填写入口名称', trigger: 'blur'}
                    ],
                    exit_name: [
                        {required: true, message: '请填写出口名称', trigger: 'blur'}
                    ],
                    lng: [
                        {required: true, message: '请填写经度', trigger: 'blur'}
                    ],
                    lat: [
                        {required: true, message: '请填写纬度', trigger: 'blur'}
                    ],
                    arm_version: [
                        {required: true, message: '请填写设备版本', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择角色', trigger: 'blur', type: 'number'}
                    ],
                    channel_address: [
                        {required: true, message: '请填写地址', trigger: 'blur'}
                    ]
                },
                dialogFormVisible: false,
            }
        },
        props: {
            park_code: String
        },
        methods: {
            tableRowClassName(row, index) {
                if (index === 1) {
                    return 'info-row';
                } else if (index === 3) {
                    return 'positive-row';
                }
                return '';
            },
            handleCurrentChange(val){
                this.httpGetList('/parkchannel/index', {
                    params: {
                        park_code: this.park_code,
                        page: val
                    }
                }, 'parkchannel_list');
            },
            openDialog(id = ''){
                if (id != '') {
                    this.httpGetView('/parkchannel/view', {params: {id: id}}, 'form')
                }
                this.dialogFormVisible = true;
            },
            makeSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params = new Object();
                        for (var key in this.form) {
                                params[key] = this.form[key];
                        }
                        params['park_code'] = this.park_code;
                        if (this.form.id != ''){
                            params['id'] = this.form.id;
                            this.httpPostForm('/parkchannel/update', params, '', true);
                        } else {
                            this.httpPostForm('/parkchannel/create', params, '', true);
                        }
                    } else {
                        console.log('submit error');
                        return false;
                    }
                });
            }
        },
        watch: {
            'park_code': function () {
                this.httpGetList('/parkchannel/index', {params: {park_code: this.park_code}}, 'parkchannel_list');
            }
        }
    }
</script>
<style proped>
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }

    .col-inline {
        position: absolute;
    }
</style>